<template>
    <div class="extension-input-adapter">
        <span class="extension-params-label">{{ displayName }}</span>
        <el-input
            v-model="modelValue"
            :type="props.type"
            :placeholder="props.placeholder"
            :disabled="props.disabled || props.readonly"
            clearable
            @input="inputChange"
        />
        <el-tooltip v-if="props.tip" :content="props.tip">
            <el-icon>
                <QuestionFilled />
            </el-icon>
        </el-tooltip>
    </div>
</template>

<script lang="ts" setup>
import {QuestionFilled} from '@element-plus/icons-vue';
import {ElIcon, ElTooltip, ElInput} from 'element-plus';
import {defineEmits, defineProps, defineModel} from 'vue';

const modelValue = defineModel<string>();

const props = defineProps({
    tip: String,
    displayName: [String, Array],
    placeholder: String,
    type: String,
    disabled: Boolean,
    readonly: Boolean
});

const emit = defineEmits(['update:modelValue']);

const inputChange = (val) => {
    emit('update:modelValue', val);
};
</script>

<style lang="less" scoped>
@import '../css/lib.less';
.extension-input-adapter {
    .extension-params-label {
        line-height: 32px;
        display: inline-block;
        width: 13em;
        text-align: right;
        vertical-align: bottom;
        margin-right: 12px;
    }
    .tip-icon {
        color: @dls-color-gray-7;
        margin-left: 12px;
    }
}
</style>
